<template>
  <div class="login-container">
    <div class="left">
      <img src="@/assets/images/login_bg.png" alt="" />
    </div>
    <div class="right">
      <div class="box">
        <div class="text_logo">
          <div class="logo">
            <!-- <img src="@/assets/images/dxlx.png" alt="" /> -->
            <img src="@/assets/images/logo.png" alt="" />
            <p>
              <span style="margin-bottom: 10px">社区老年人健康</span>
              <span>管理系统</span>
            </p>
          </div>
          <!-- <h3>欢迎登录</h3> -->
        </div>
        <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 20 }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-form-item
            label="账号"
            name="userName"
            :rules="[{ required: true, message: '请输入账号！' }]"
          >
            <a-input v-model:value="formState.userName">
              <template #prefix>
                <UserOutlined class="site-form-item-icon" /> </template
            ></a-input>
          </a-form-item>

          <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请输入密码！' }]"
          >
            <a-input-password v-model:value="formState.password">
              <template #prefix>
                <LockOutlined class="site-form-item-icon" />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item v-show="!isShow" label="手机号" name="phone">
            <a-input v-model:value="formState.phone">
              <template #prefix>
                <PhoneOutlined class="site-form-item-icon" />
              </template>
            </a-input>
          </a-form-item>

          <!-- <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
          <a-checkbox v-model:checked="formState.remember">请勾选协议</a-checkbox>
        </a-form-item> -->

          <a-form-item :wrapper-col="{ offset: 6, span: 18 }">
            <a-button
              v-show="isShow"
              class="btn"
              type="primary"
              html-type="submit"
              >登录</a-button
            >
            <a-button
              v-show="!isShow"
              @click="returnView"
              class="btn"
              type="primary"
              >返回</a-button
            >
            <a-button v-show="isShow" @click="isShow = false"
              >忘记密码</a-button
            >
            <a-button v-show="!isShow" @click="changeUserPassword"
              >提交</a-button
            >
          </a-form-item>
        </a-form>
      </div>
      <!-- <div class="text-bottom">
        <p>没有账号？<a href="#">点击注册</a></p>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
  UserOutlined,
  LockOutlined,
  PhoneOutlined,
} from '@ant-design/icons-vue'
// import { message } from 'ant-design-vue'
import { login, apiChangePassWord } from '@/api/User/api'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
// import { useRouter } from 'vue-router'
// console.log(userStore.token)
const router = useRouter()
const isShow = ref<boolean>(true)

const formState = reactive({
  userName: '',
  password: '',
  phone: '',
})

const onFinish = async () => {
  try {
    let res: any = await login(formState)
    let { data } = res
    if (data.emp.type == 2) {
      return message.error('用户不能登录后台系统')
    }
    localStorage.setItem('authorityToken', data.token)
    localStorage.setItem('employeeInfo', JSON.stringify(data.emp))
    // console.log(res)
    message.success('登录成功')

    router.push({
      path: '/Manage/Home',
    })
  } catch (error: any) {
    message.error(error)
  }
}

const returnView = () => {
  formState.phone = ''
  isShow.value = true
}

//修改密码
const changeUserPassword = async () => {
  try {
    await apiChangePassWord(formState)
    message.success('修改成功，请重新登录')
  } catch (error) {
    message.error('修改失败')
  }
  returnView()
}

const onFinishFailed = () => {
  message.error('请完成表单填写')
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .left {
    width: 70%;
    height: 100%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    position: relative;
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    // 673 873
    background: rgba(185, 124, 2, 0.6);

    .box {
      background: rgba($color: #ffffff, $alpha: 0.8);
      box-shadow: 0px 8px 16px 2px rgba($color: #b97d03, $alpha: 0.8);
      padding: 20px;
      border-radius: 20px;
    }
    .text-bottom {
      margin-left: 10px;
      font-size: 14px;
      a {
        color: #1677ff;
        text-decoration: none;
      }
    }

    .text_logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      h3 {
        font-family: '微软雅黑';
        text-align: center;
        font-size: 24px;
        margin-bottom: 30px;
        margin-left: 10px;
      }
      .logo {
        width: 240px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: '楷体';
        color: #996702;
        img {
          width: 60px;
          height: 60px;
        }
        p {
          font-size: 24px;
          font-weight: 800;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
.btn {
  background: #b97d03 !important;
  margin-right: 16px;
}
</style>
